<template>
  <div class="tab-wrap">
    <div class="tabs">
      <button
        v-for="i in list"
        :key="i.id"
        @click="choose = i.id"
      >{{i.title}}</button>
    </div>
    <div class="content">{{list[choose].content}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {id: 0, title: 'A', content: 'aaaaaaaaaaaaaa'},
        {id: 1, title: 'B', content: 'bbbbbbbbbbbbbb'},
        {id: 2, title: 'C', content: 'cccccccccccccc'}
      ],
      choose: 0
    }
  }
}
</script>

<style scoped>
.tab-wrap {
  border: 1px solid #ccc;
}
</style>